<template>
  <div id="commentCell">
    <div class="leftBox">
      <img :src="item.avatar_url" alt="" />
    </div>
    <div class="rightBox">
      <div class="headerBox">
        <div class="name">{{ item.name }}</div>
        <p>
          <span>{{ calcDate(item.updateAt) }}</span>
        </p>
      </div>
      <div class="contentBox">
        <span @click="callBackComment(item)"> {{ item.content }}</span>
        <div class="c2c" v-if="item.children.length > 0">
          <div
            @click="callBackComment(obj)"
            class="c2cItem"
            v-for="obj in deepMapData(item.children, [])"
            :key="obj.id"
          >
            <img :src="obj.avatar_url" alt="" /><i>
              <span class="commenter"> {{ obj.name + '  :' }}</span>
              <span class="commenter2">{{
                deepMapData(item.children, []).find(
                  (itemson) => itemson.id === obj.comment_id
                )
                  ? '@' +
                    deepMapData(item.children, []).find(
                      (itemson) => itemson.id === obj.comment_id
                    ).name +
                    ' '
                  : ' '
              }}</span> </i
            ><span>{{ obj.content }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'CommentCell',
  inject: ['callBackComment'],
  props: {
    item: {}
  },
  components: {},
  data() {
    return {}
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    calcDate(date) {
      moment.locale('zh-cn')
      return moment(date).fromNow()
    },
    deepMapData(list, result) {
      for (const item of list) {
        if (item.children.length > 0) {
          this.deepMapData(item.children, result)
        }
        result.unshift(item)
      }
      return result
    }
  }
}
</script>

<style lang="less" scoped>
#commentCell {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  margin-bottom: 16px;
  .leftBox {
    width: 30px;
    img {
      width: 30px;
      height: 30px;
      border-radius: 15px;
    }
  }
  .rightBox {
    width: 100%;
    border-bottom: 1px solid #f3f4f5;
    .headerBox {
      height: 30px;
      .name {
        font-size: 12px;
        color: #233233;
      }
      p {
        font-size: 12px;
        margin: 0;
        color: #ccc;
      }
    }
    .contentBox {
      font-size: 14px;
      margin: 10px 0;
      .c2c {
        background-color: #eee;
        max-height: 300px;
        margin-top: 10px;
        border-radius: 10px;
        padding: 10px 16px;
        overflow-y: auto;
        .c2cItem {
          margin: 5px 0;
          img {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            vertical-align: middle;
          }
          i {
            margin-left: 10px;
            font-style: normal;
            .commenter {
              color: dodgerblue;
            }
            .commenter2 {
              color: seagreen;
            }
          }
        }
      }
    }
  }
}
</style>
